<template>
  <div style="padding:10px">
    <div style="margin: 10px 0">
      <el-button type="primary" @click="add" v-if="user.role === 1">新增</el-button>
      <el-button type="primary" v-if="user.role === 1">导入</el-button>
      <el-button type="primary" v-if="user.role === 1">导出</el-button>
      <el-input v-model="search" placeholder="请输入关键字" style="width: 20%;margin-left: 500px" clearable/>
      <el-button type="primary" style="margin-left: 10px" @click="load">查询</el-button>
    </div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="id" label="ID" sortable/>
      <el-table-column prop="name" label="会议室名称"/>
      <el-table-column prop="address" label="会议室地址"/>
      <el-table-column prop="user" label="申请人"/>
      <el-table-column prop="reason" label="申请原因"/>
      <el-table-column prop="time" label="申请时间"/>
      <el-table-column prop="fix" label="报修信息"/>


      <el-table-column fixed="right" label="操作" width="120" v-if="user.role === 1">

        <template #default="scope" >
          <el-button type="text" @click-once="handleEdit(scope.row)" >同意
          </el-button>
          <el-button type="text" @click="handleDelete(scope.row) " >不同意
          </el-button>




        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5,10,20]"
          :page-size="pageSize"
          layout="total,sizes,prev,pager,next,jumper"
          :total="total">
      </el-pagination>

      <el-dialog
          v-model="dialogVisible"
          title="提示"
          width="30%"
      >
        <el-form label-width="120px">
          <el-form-item :model="form" label="会议室名称">
            <el-input v-model="form.name" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item :model="form" label="会议室地址">
            <el-input v-model="form.address" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item :model="form" label="容纳人数">
            <el-input v-model="form.capacity" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item :model="form" label="多媒体">
            <el-input v-model="form.tools" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item :model="form" label="申请人">
            <el-input v-model="form.user" style="width: 80%"></el-input>
          </el-form-item>




        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import request from "@/utils/request";
export default {
  name: 'meeting',
  components: {},
  data() {
    return {
      flag:true,
      user:{},
      form: {},
      dialogVisible: false,
      xianshi: false,
      currentPage: 1,
      total: 10,
      pageSize: 10,
      search: "",
      tableData: []
    }
  },
  created() {
    let userStr= sessionStorage.getItem("user") || "{}"
    this.user= JSON.parse(userStr)


    request.get("/api/user/"+this.user.id).then( res =>{
          if (res.code === '0'){
            this.user=res.data
          }
        }
    )

    this.load();
  },
  methods: {
    filesUploadSucesss(res){
      this.form.cover=res.data
    },
    load() {
      request.get("/api/meeting", {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          search: this.search
        }
      }).then(res => {
        // console.log(res)
        this.tableData = res.data.records;
        this.total = res.data.total
      })
    },
    add() {
      this.dialogVisible = true;
      this.form = {}

    },
    application(row){
      this.form = JSON.parse(JSON.stringify(row));
      this.xianshi = true
      this.form.state =2
      this.$nextTick(()=>{
        this.$refs['upload'].clearFiles();
      })
    },
    save() {
      if (this.form.id) {
        request.put("/api/meeting", this.form).then(res => {
          console.log(res);
          if (res.code === '0') {
            this.$message({
              type: "success",
              message: "更新成功"
            })
          } else {
            this.$message({
              type: "error",
              message: res.msg
            })
          }
          this.load();
          this.dialogVisible = false
          this.xianshi =false
        });
      } else {
        request.post("/api/meeting", this.form).then(res => {
          console.log(res);
          if (res.code === '0') {
            this.$message({
              type: "success",
              message: "新增成功"
            })
          } else {
            this.$message({
              type: "error",
              message: res.msg
            })
          }
          this.load();
          this.dialogVisible = false
        })
      }
    },
    handleEdit(row) {

          this.form = JSON.parse(JSON.stringify(row));
          this.dialogVisible=true
          this.flag=!this.flag;
          this.form.state =1
          this.$nextTick(()=>{
            this.$refs["upload"].clearFiles()
          })


    },
    handleSizeChange(pageSize) {
      this.pageSize=pageSize;
      this.load();
    },
    handleCurrentChange(pageNum) {
      this.currentPage=pageNum;
      this.load();
    },
    // handleDelete(id) {
    //   console.log(id)
    //   request.delete("/api/meeting" + id).then(res => {
    //     if (res.code === '0') {
    //       this.$message({
    //         type: "success",
    //         message: "删除成功"
    //       })
    //     } else {
    //       this.$message({
    //         type: "error",
    //         message: res.msg
    //       })
    //     }
    //     this.load();
    //   })
    // },
    handleDelete(row){
      this.form = JSON.parse(JSON.stringify(row));
      this.dialogVisible=true
      this.flag=!this.flag;
      this.form.state =0
      this.$nextTick(()=>{
        this.$refs["upload"].clearFiles()
      })
    }
  }
}
</script>
